import React, { Component } from "react";
import IndexItem from "../../components/rankIngItem";
import { connect } from "react-redux";
import { getRankList } from "../../redux/actions";

import { List } from "antd-mobile";
import "./index.scss";

const ListItem = List.Item;

class Index extends Component {
  componentDidMount() {
    let temArr = [];
    for (let index = 0; index < 10; index++) {
      temArr.push(index);
    }
    this.props.getRankList(temArr);
  }

  render() {
    const { rankingObj } = this.props;
    return (
      <div id="rankingObj" className="rankingObj">
        <List>
          {rankingObj.map(item => (
            <ListItem
              key={item.name}
              onClick={() =>
                this.props.history.push(`/billBoard/${item.index}/${ encodeURIComponent(item.name)}/B`)
              }
            >
              <IndexItem rankdata={item}></IndexItem>
            </ListItem>
          ))}
        </List>
      </div>
    );
  }
}
export default connect(state => ({ rankingObj: state.rankingObj }), {
  getRankList
})(Index);
